<template>
	<view>
		<view class="list">
			<view class="flex_col" :class="{'active':pickerUserIndex==index}" :key="index" :data-index="index">
				<view class="flex_grow">
					<view class="flex_col">
						<view class="flex_grow">课程名称</view>
						<view>
							{{curse.curseName}}
						</view>
					</view>
				</view>
			</view>
			<view class="flex_col" :class="{'active':pickerUserIndex==index}" :key="index" :data-index="index">
				<view class="flex_grow">
					<view class="flex_col">
						<view class="flex_grow">课程开始时间</view>
						<view>
							{{curse.starttime}}
						</view>
					</view>
				</view>
			</view>
			<view class="flex_col" :class="{'active':pickerUserIndex==index}" :key="index" :data-index="index">
				<view class="flex_grow">
					<view class="flex_col">
						<view class="flex_grow">课程结束时间</view>
						<view>
							{{curse.endtime}}
						</view>
					</view>
				</view>
			</view>
			<view class="flex_col" :class="{'active':pickerUserIndex==index}" :key="index" :data-index="index">
				<view class="flex_grow">
					<view class="flex_col">
						<view class="flex_grow">每节课价格</view>
						<view>
							{{curse.cursePrice}}元
						</view>
					</view>
				</view>
			</view>
			<view class="flex_col" :class="{'active':pickerUserIndex==index}" :key="index" :data-index="index">
				<view class="flex_grow">
					<view class="flex_col">
						<view class="flex_grow">课程总节数</view>
						<view>
							{{curse.curseCount}}
						</view>
					</view>
				</view>
			</view>
			<view class="flex_col" :class="{'active':pickerUserIndex==index}" :key="index" :data-index="index">
				<view class="flex_grow">
					<view class="flex_col">
						<view class="flex_grow">课程总价</view>
						<view>
							{{curse.curseTotalPrice}}元
						</view>
					</view>
				</view>
			</view>
			<view class="flex_col" :class="{'active':pickerUserIndex==index}" :key="index" :data-index="index">
				<view class="flex_grow">
					<view class="flex_col">
						<view class="flex_grow">课程最大人数</view>
						<view>
							{{curse.curseStudentNum}}
						</view>
					</view>
				</view>
			</view>
			<view class="flex_col" :class="{'active':pickerUserIndex==index}" :key="index" :data-index="index">
				<view class="flex_grow">
					<view class="flex_col">
						<view class="flex_grow">课程实际报名人数人数</view>
						<view>
							{{curse.curseRealStudentNum}}
						</view>
					</view>
				</view>
			</view>
			<view class="flex_col" :class="{'active':pickerUserIndex==index}" :key="index" :data-index="index">
				<view class="flex_grow">
					<view class="flex_col">
						<view class="flex_grow">课程类型</view>
						<view>
							{{curse.curseType}}
						</view>
					</view>
				</view>
			</view>
			<view class="flex_col" :class="{'active':pickerUserIndex==index}" :key="index" :data-index="index">
				<view class="flex_grow">
					<view class="flex_col">
						<view class="flex_grow" style="font-weight: bold;">课程描述</view>
					</view>

				</view>
			</view>
			<view class="flex_col" :class="{'active':pickerUserIndex==index}" :key="index" :data-index="index">
				<view class="flex_grow">
					<view class="flex_col">
						<view class="flex_grow">{{curse.curseDesc}}</view>
					</view>

				</view>
			</view>
			<view class="flex_col" :class="{'active':pickerUserIndex==index}" :key="index" :data-index="index">
				<view class="flex_grow">
					<view class="flex_col">
						<view class="flex_grow" style="font-weight: bold;">课程特色</view>
					</view>
				</view>
			</view>
			<view v-for="(feature,index) in curse.curseFeaturesList" class="flex_col" :class="{'active':pickerUserIndex==index}"
			 :key="index" :data-index="index">
				<view class="flex_grow">
					<view class="flex_col">
						<view class="flex_grow">
							{{index+1}}、{{feature}}
						</view>
					</view>
				</view>
			</view>
			<view class="flex_col" :class="{'active':pickerUserIndex==index}" :key="index" :data-index="index">
				<view class="flex_grow">
					<view class="flex_col">
						<view class="flex_grow" style="font-weight: bold;">课程适宜人群</view>
					</view>
				</view>
			</view>
			<view v-for="(suitable,index) in curse.curseSuitableList" class="flex_col" :class="{'active':pickerUserIndex==index}"
			 :key="index" :data-index="index">
				<view class="flex_grow">
					<view class="flex_col">
						<view class="flex_grow">
							{{index+1}}、{{suitable}}
						</view>
					</view>
				</view>
			</view>
			<view class="flex_col" :class="{'active':pickerUserIndex==index}" :key="index" :data-index="index">
				<view class="flex_grow">
					<view class="flex_col">
						<view class="flex_grow" style="font-weight: bold;">课程好处</view>
					</view>
				</view>
			</view>
			<view v-for="(benefit,index) in curse.curseBenefitsList" class="flex_col" :class="{'active':pickerUserIndex==index}"
			 :key="index" :data-index="index">
				<view class="flex_grow">
					<view class="flex_col">
						<view class="flex_grow">
							{{index+1}}、{{benefit}}
						</view>
					</view>
				</view>
			</view>
			<view class="flex_col" :class="{'active':pickerUserIndex==index}" :key="index" :data-index="index">
				<view class="flex_grow">
					<view class="flex_col">
						<view class="flex_grow" style="font-weight: bold;">课程注意事项</view>
					</view>
				</view>
			</view>
			<view v-for="(tip,index) in curse.curseTipsList" class="flex_col" :class="{'active':pickerUserIndex==index}" :key="index"
			 :data-index="index">
				<view class="flex_grow">
					<view class="flex_col">
						<view class="flex_grow">
							{{index+1}}、{{tip}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="margin-left: 40%;">
			课程计划
		</view>
		<view class="list" v-for="(cursePlan,index) in cursePlanList" :key="index">
			<view class="flex_col" :class="{'active':pickerUserIndex==index}" :key="index" :data-index="index">
				<view class="flex_grow">
					<view class="flex_col">
						<view class="flex_grow">课程编号</view>
						<view>
							{{cursePlan.cursePlanNo}}
						</view>
					</view>
				</view>
			</view>
			<view class="flex_col" :class="{'active':pickerUserIndex==index}" :key="index" :data-index="index">
				<view class="flex_grow">
					<view class="flex_col">
						<view class="flex_grow">课程名</view>
						<view>
							{{cursePlan.curseTitle}}
						</view>
					</view>
				</view>
			</view>
			<view class="flex_col" :class="{'active':pickerUserIndex==index}" :key="index" :data-index="index">
				<view class="flex_grow">
					<view class="flex_col">
						<view class="flex_grow">开始时间</view>
						<view>
							{{cursePlan.curseStartTime}}
						</view>
					</view>
				</view>
			</view>
			<view class="flex_col" :class="{'active':pickerUserIndex==index}" :key="index" :data-index="index">
				<view class="flex_grow">
					<view class="flex_col">
						<view class="flex_grow">课程时长</view>
						<view>
							{{cursePlan.cursePeriod}}分钟
						</view>
					</view>
				</view>
			</view>
			<view class="flex_col" :class="{'active':pickerUserIndex==index}" :key="index" :data-index="index">
				<view class="flex_grow">
					<view class="flex_col">
						<view class="flex_grow">课程状态</view>
						<view>
							<text v-if="cursePlan.curseStatus==2">已结课</text>
							<text v-else>未结课</text>
						</view>
					</view>
				</view>
			</view>

			<view class="flex_col" :class="{'active':pickerUserIndex==index}" :key="index" :data-index="index">
				<view class="flex_grow">
					<view class="flex_col">
						<view class="flex_grow">卡路里消耗量</view>
						<view>
							{{cursePlan.curseKaluli}}
						</view>
					</view>
				</view>
			</view>
			<view>课程内容</view>
			<view>{{cursePlan.cursePlanContent}}</view>
		</view>
		<view style="height: 50rpx;"></view>
		<view v-if="curseReviewList.length>0" style="margin-left: 40%;">
			课程评价
		</view>
		<view v-if="curseReviewList.length>0" class="list" v-for="(curseReview,index) in curseReviewList" :key="index">
			<view class="flex_col" :class="{'active':pickerUserIndex==index}" :key="index" :data-index="index">
				<view class="flex_grow">
					<view class="flex_col">
						<view class="flex_grow">评价时间</view>
						<view>
							{{curseReview.reviewTime}}
						</view>
					</view>
				</view>
			</view>
			<view class="flex_col" :class="{'active':pickerUserIndex==index}" :key="index" :data-index="index">
				<view class="flex_grow">
					<view class="flex_col">
						<view class="flex_grow">评价等级</view>
						<view>
							{{curseReview.reviewLevel}}
						</view>
					</view>
				</view>
			</view>
			<view>评价内容</view>
			<view>{{curseReview.reviewComment}}</view>
			<view>评价图片</view>
			<view v-for="(curseReviewPic,index) in curseReview.reviewPicList" :key="index">
				<image style="width:180upx ;height: 180upx;" :src="curseReviewPic"></image>
			</view>
			<view style="height: 30rpx;"></view>
		</view>
	</view>
</template>

<script>
	import base from '@/common/base.js'
	export default {
		data() {
			return {
				curse: [],
				cursePlanList: [],
				curseReviewList: [],
				/* 窗口尺寸 */
				winSize: {},
				/* 显示遮罩 */
				showShade: false,
				/* 显示操作弹窗 */
				showPop: false,
				/* 弹窗定位样式 */
				popStyle: "",
				/* 选择的用户下标 */
				pickerUserIndex: -1
			}
		},
		onLoad(options) {
			this.getCurseDetailMessage(options.curseId);
			this.getCurseReviewList(options.curseId);
			this.getWindowSize();

			// #ifdef H5
			document.onLong = function(e) {
				var e = e || window.event;
				e.preventDefault();
			};
			// #endif
		},
		methods: {
			getCurseReviewList(curseId){
				uni.request({
					url:base.urlPrefix+"yoga_app/curse-review/getCurseReviewListByCurseId",
					data:{
						curseId:curseId
					},
					success: (res) => {
						this.curseReviewList=res.data.list;
					}
				})
			},
			/* 列表触摸事件 */
			listTap() {
				/* 因弹出遮罩问题，所以需要在遮罩弹出的情况下阻止列表事件的触发 */
				if (this.showShade) {
					return;
				}

				console.log("列表触摸事件触发")
			},
			getCurseDetailMessage(curseId) {
				uni.request({
					url: base.urlPrefix + "yoga_app/curse/coachGetCurseDetailByCurseId",
					data: {
						curseId: curseId
					},
					success: (res) => {
						this.curse = res.data.object;
						this.cursePlanList = res.data.list;
					}
				})
			},
			/* 获取窗口尺寸 */
			getWindowSize() {
				uni.getSystemInfo({
					success: (res) => {
						this.winSize = {
							"witdh": res.windowWidth,
							"height": res.windowHeight
						}
					}
				})
			},
			/* 长按监听 */
			onLongPress(e) {
				let [touches, style, index] = [e.touches[0], "", e.currentTarget.dataset.index];

				/* 因 非H5端不兼容 style 属性绑定 Object ，所以拼接字符 */
				if (touches.clientY > (this.winSize.height / 2)) {
					style = `bottom:${this.winSize.height-touches.clientY}px;`;
				} else {
					style = `top:${touches.clientY}px;`;
				}
				if (touches.clientX > (this.winSize.witdh / 2)) {
					style += `right:${this.winSize.witdh-touches.clientX}px`;
				} else {
					style += `left:${touches.clientX}px`;
				}

				this.popStyle = style;
				this.pickerUserIndex = Number(index);
				this.showShade = true;
				this.$nextTick(() => {
					setTimeout(() => {
						this.showPop = true;
					}, 10);
				});
			},
			toFocusedPerson() {
				uni.navigateTo({
					url: "/pages/user/focusedPersonIndex/index"
				})
			},
			/* 隐藏弹窗 */
			hidePop() {
				this.showPop = false;
				this.pickerUserIndex = -1;
				setTimeout(() => {
					this.showShade = false;
				}, 250);
			},
			/* 选择菜单 */
			pickerMenu(e) {
				let index = Number(e.currentTarget.dataset.index);
				console.log(`第${this.pickerUserIndex+1}个用户,第${index+1}个按钮`);
				// 在这里开启你的代码秀

				uni.showToast({
					title: `第${this.pickerUserIndex+1}个用户,第${index+1}个按钮`,
					icon: "none",
					mask: true,
					duration: 600
				});

				/* 
				 因为隐藏弹窗方法中会将当前选择的用户下标还原为-1,
				 如果行的菜单方法存在异步情况，请在隐藏之前将该值保存，或通过参数传入异步函数中
				 */
				this.hidePop();
			}
		}
	}
</script>

<style scoped lang="scss">
	/* 列式弹性盒子 */
	.flex_col {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: center;
		align-content: center;
	}

	/* 弹性盒子弹性容器 */
	.flex_col .flex_grow {
		width: 0;
		-webkit-box-flex: 1;
		-ms-flex-positive: 1;
		flex-grow: 1;
	}

	.flex_row .flex_grow {
		-webkit-box-flex: 1;
		-ms-flex-positive: 1;
		flex-grow: 1;
	}

	/* 弹性盒子允许换行 */
	.flex_col.flex_wrap {
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	/* 列表 */
	.list {
		background-color: #fff;
		font-size: 28upx;
		color: #333;
		user-select: none;
		touch-callout: none;

		&>view {
			padding: 24upx 30upx;
			position: relative;

			&:active,
			&.active {
				background-color: #f3f3f3;
			}

			image {
				height: 80upx;
				width: 80upx;
				border-radius: 4px;
				margin-right: 20upx;
			}

			&>view {
				line-height: 40upx;

				.time,
				.info {
					color: #999;
					font-size: 24upx;
				}

				.time {
					width: 150upx;
					text-align: right;
				}

				.info {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}

		&>view:not(:first-child) {
			margin-top: 1px;

			&::after {
				content: '';
				display: block;
				height: 0;
				border-top: #CCC solid 1px;
				width: 620upx;
				position: absolute;
				top: -1px;
				right: 0;
				transform: scaleY(0.5);
				/* 1px像素 */
			}
		}
	}

	/* 遮罩 */
	.shade {
		position: fixed;
		z-index: 100;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		-webkit-touch-callout: none;

		.pop {
			position: fixed;
			z-index: 101;
			width: 200upx;
			box-sizing: border-box;
			font-size: 28upx;
			text-align: left;
			color: #333;
			background-color: #fff;
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
			line-height: 80upx;
			transition: transform 0.15s ease-in-out 0s;
			user-select: none;
			-webkit-touch-callout: none;
			transform: scale(0, 0);

			&.show {
				transform: scale(1, 1);
			}

			&>view {
				padding: 0 20upx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				user-select: none;
				-webkit-touch-callout: none;

				&:active {
					background-color: #f3f3f3;
				}
			}
		}
	}
</style>
